import React, { useEffect, useState } from 'react';
import { Descriptions, Avatar, Switch } from 'antd'
import { useLocation } from 'react-router-dom'
import './TeamDetail.scss'
import { getMngtable, getTeamDetail, getOrglist, getTeamTag } from '../../../../api/Datas'
import pic from '../../../../assets/datas/ewm.png'
import { AnyAction } from 'redux';
import { useSelector } from 'react-redux';
interface Props {

}

function TeamDetail(props: Props) {
    var location = useLocation()
    const [list, setList] = useState<any>({})
    const [options, setOptions] = useState<any>([])
    var [mytime,setMyTime]=useState('')
    var [teamTag, setTeamTag] = useState<any>([])
    var oforg=useSelector((state:any)=>{return state.ZCXreducer.oforg})
    // 挂载期
    useEffect(() => {
        getList()
        getTeamTagList()
        getManagerList()
    }, [])
    // 获取团队详情
    var getList = async () => {
        var res = await getTeamDetail({ id: location.state })
        console.log(res)
        if (res.data.code == 200) {
            setList(res.data.data)
            setMyTime(res.data.data.teamCreatetime)
        }
    }
    // 获取所属机构列表
    var getManagerList = async () => {
        var res = await getOrglist()
        setOptions(res.data.data)
    }
    // 获取团队标签
    var getTeamTagList = async () => {
        var res = await getTeamTag()
        setTeamTag(res.data)
    }
    return (
        <div className='teamdetail'>
            <div className="title">
                <div className='leftborder'></div>
                <h3>我管理的团队详情</h3>
            </div>
            <div className="detail">
                <Descriptions title="医生信息" column={3}>
                    <Descriptions.Item label="团队编号" >{list.teamId}</Descriptions.Item>
                    <Descriptions.Item label="团队名称">{list.teamName}</Descriptions.Item>
                    <Descriptions.Item label="团队头像"><Avatar src={list.teamImg} /></Descriptions.Item>
                    <Descriptions.Item label="团队标签">{teamTag.length&&teamTag.map((item: any) => item.id == list.labelId&&item.name)}</Descriptions.Item>
                    <Descriptions.Item label="所属机构">{oforg.length!=0&&oforg.map((item: any) => item.value == list.mechanismId&&item.label)}</Descriptions.Item>
                </Descriptions>
                <Descriptions column={1}>
                    <Descriptions.Item label="邀请加入二维码"><img src={list.teamQrcode} width={100} /> </Descriptions.Item>
                    <Descriptions.Item label="创建时间">{mytime.slice(0,10)}</Descriptions.Item>
                    <Descriptions.Item label="创建人">{list.teamCreater}</Descriptions.Item>
                    <Descriptions.Item label="团队状态"><span style={{ color: list.teamState ? "#21e121" : "#ccc", fontSize: '12px' }}>{list.teamState ? '启用中' : '未启用'} </span> </Descriptions.Item>
                </Descriptions>

            </div>
        </div>
    );
}

export default TeamDetail;